<template>
  <div class="editor-cover">
    <div class="editor-box clearfix">
      <div class="editor-container">
        <div class="editor-wrap">
          <el-input @input="topic_success = true" :class="{'in-err': !topic_success}" class="editor-title" placeholder="标题:一句话说清问题，用问号结尾" v-model="topic">
          </el-input>
          <div v-show="!topic_success" class="error-msg">{{ topic_err_msg }}</div>
          <editor @input-change="content_success = true" :class="{'in-err': !content_success}" class="mt-20" :editor_placeholder="editor_placeholder"></editor>
          <div v-show="!content_success" class="error-msg">{{ content_err_msg }}</div>
        </div>
      </div>
    </div>
    <div class="publish-footer">
      <div class="editor-container">
        <slot name="chapter"></slot>
        <el-button @click="submitQuestion" class="pull-right" type="primary">
          提交
        </el-button>
        <el-button @click="cancelSubmit" class="pull-right">
          取消
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import Editor from 'components/editor'

  export default {
    data() {
      return {
        topic: '',
        topic_err_msg: '',
        content_err_msg: '',
        topic_success: true,
        content_success: true,
        editor_placeholder: `1. 描述你的问题

2. 贴上相关代码

3. 贴上报错信息

4. 推荐使用Markdown语法
              `
      }
    },
    components: {
      Editor
    },
    methods: {
      cancelSubmit(){
        this.$emit('cancel')
      },
      submitQuestion() {
        let content = document.querySelector('.editor-con .compiledMarkdown').innerHTML
        let self = this
        let topic = self.topic.trim()
        let topic_num = topic.length

        if (topic_num == 0) {
          self.topic_success = false
          self.topic_err_msg = '必须填写标题'
        }
        else if(topic_num < 7) {
          self.topic_success = false
          self.topic_err_msg = '您输入的标题字数有点少哦'
        }
        else if(topic_num > 50) {
          self.topic_success = false
          self.topic_err_msg = '字数超过啦，最多可输入50个字'
        }
        else {
          self.topic_success = true
          self.topic_err_msg = ''
        }

        if (content.length == 0) {
          self.content_success = false
          self.content_err_msg = '必须填写内容'
        }
        else if (content.length > 3000)  {
          self.content_success = true
          self.content_err_msg = '内容输入过多!'
        }

        if (!self.topic_success || !self.content_success) {
          return
        }
        this.$emit('submitted', topic, content)
      },
    }
  }
</script>

<style scoped lang="less">
  .error-msg {
    padding: 2px;
    background: #f2dede;
    font-size: 12px;
    color: #a42625;
    line-height: 1;
    display: inline-block;
  }

  .editor-cover {
    z-index: 102;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .editor-box {
    text-align: left;
    background-color: #f3f3f3;
    padding-top: 20px;
    padding-bottom: 80px;
    height: 100%;
    .editor-wrap {
      height: 100%;
      .editor-title {
      }
    }
  }
  
  .editor-container {
    padding: 0 30px !important;
    width: 100%;
    max-width: 1600px;
    box-sizing: border-box;
  }
  
  .publish-footer {
    padding: 10px 0;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 3;
    background-color: #F3F3F3;
    box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.24);
    button {
      margin-left: 20px;
    }
  }
</style>












